<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar fixed :height="48" :border="false" statusBar>
			<view class="tableft" slot="left">书城</view>
			<view class="tabright" slot="right" @click="switchTo()">
				<image style="width: 40rpx;" src="../../static/topjinbi.png" mode="widthFix"></image>
				<view>领金币</view>
			</view>
		</uni-nav-bar>
		<!-- 搜索框 -->
		<view style="position: fixed;top: 48;left: 0;width: 100%;z-index: 5;background-color: #fff;">
			<uni-search-bar
				radius="18"
				placeholder="搜索书名、作者、关键字"
				@focus="goTo('search')"
				cancelButton="none"
			/>
		</view>
		<!-- 轮播图 -->
		<view>
			<uni-swiper-dot
				style="margin-top: 42px;"
				:info="banners"
				:current="current"
				mode="default"
				:dotsStyles="{ selectedBackgroundColor: '#f1f1f1', backgroundColor: 'rgba(255,255,249,.5)' }"
			>
				<swiper :autoplay="true" :interval="3000" :duration="1000" circular @change="changeBanner">
					<swiper-item v-for="(item, index) in banners" :key="index">
						<image :src="`../../static/${item}`" style="width: 100%;" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 金刚区 -->
		<view class="container" style="margin-bottom: 10rpx;">
			<uni-grid
				style="height: 140rpx;"
				:column="4"
				:showBorder="false"
				:highlight="false"
				@change="navigatorTo($event)"
			>
				<uni-grid-item :index="1" style="text-align: center;align-items: center;">
					<image src="../../static/hot.png" style="width: 80rpx" mode="widthFix"></image>
					<view style="margin-top: 10rpx;color:#999">热门榜</view>
				</uni-grid-item>
				<uni-grid-item :index="2" style="text-align: center;align-items: center;">
					<image src="../../static/new.png" style="width: 80rpx" mode="widthFix"></image>
					<view style="margin-top: 10rpx;color:#999">新书榜</view>
				</uni-grid-item>
				<uni-grid-item :index="3" style="text-align: center;align-items: center;">
					<image src="../../static/koubei.png" style="width: 80rpx" mode="widthFix"></image>
					<view style="margin-top: 10rpx;color:#999">口碑榜</view>
				</uni-grid-item>
				<uni-grid-item :index="4" style="text-align: center;align-items: center;">
					<image src="../../static/over.png" style="width: 80rpx" mode="widthFix"></image>
					<view style="margin-top: 10rpx;color:#999">完结榜</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 热门更新 -->
		<view class="container">
			<uni-list :border="false">
				<uni-list-item rightText="更多" showArrow>
					<view style="font-size: 42rpx;font-weight: 600;" slot="header">热门更新</view>
				</uni-list-item>
				<uni-list-item v-if="hot" :border="false" clickable @click="toDetail(hot.id)">
					<view class="booklist" slot="body">
						<image class="cover" :src="hot.cover" mode="widthFix"></image>
						<view>
							<view>{{ hot.name }}</view>
							<view>{{ hot.desc }}</view>
							<view>
								<view>{{ hot.author }}</view>
								<view>{{ hot.score }}分</view>
							</view>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
			<uni-grid
				v-if="hotUpdate"
				style="margin: 10rpx 10rpx 0;"
				:column="4"
				:square="false"
				:highlight="false"
				:showBorder="false"
			>
				<uni-grid-item v-for="(item, index) in hotUpdate" :key="index">
					<view style="width: 180rpx;" @click="toDetail(item.id)">
						<image class="cover" :src="item.cover" mode="widthFix"></image>
						<view>
							<view class="single">{{ item.name }}</view>
							<view class="single" style="color: #999;font-size: 26rpx;">{{ item.author }}</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 热门结束 -->
		<!-- 重磅推荐 -->
		<view class="container">
			<uni-list :border="false">
				<uni-list-item rightText="更多" showArrow>
					<view style="font-size: 42rpx;font-weight: 600;" slot="header">重磅推荐</view>
				</uni-list-item>
				<uni-list-item
					:border="false"
					v-for="(item, index) in recommend"
					:key="index"
					clickable
					@click="toDetail(item.id)"
				>
					<view class="booklist" slot="body">
						<image class="cover" :src="item.cover" mode="widthFix"></image>
						<view>
							<view>{{ item.name }}</view>
							<view>{{ item.desc }}</view>
							<view>
								<view>{{ item.author }} · {{ item.min }}</view>
								<view>{{ item.score }} 分</view>
							</view>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- banner -->
		<view class="container" style="text-align: center;padding: 0 30rpx;">
			<image src="../../static/banner3.png" style="width: 100%;" mode="widthFix"></image>
		</view>
		<!-- 新书抢先看 -->
		<view class="container">
			<uni-list :border="false">
				<uni-list-item rightText="更多" showArrow>
					<view style="font-size: 42rpx;font-weight: 600;" slot="header">新书抢先看</view>
				</uni-list-item>
			</uni-list>
			<scroll-view scroll-x style="margin: 0 30rpx;height: 300rpx;">
				<view style="width: 100%;display: flex;">
					<view
						@click="toDetail(item.id)"
						v-for="(item, index) in NewBookpreview"
						:key="index"
						style="margin-right: 20rpx;position: relative;"
					>
						<view
							class="tag"
							:class="{
								'tag-one': index + 1 == 1,
								'tag-two': index + 1 == 2,
								'tag-three': index + 1 !== 1 && index + 1 !== 2
							}"
						>
							{{ index + 1 }}
						</view>
						<image :src="item.cover" class="cover" mode="widthFix"></image>
						<view>
							<view class="single">{{ item.name }}</view>
							<view style="color: #999;font-size: 26rpx;">{{ item.author }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 精选专题 -->
		<view class="container">
			<uni-list :border="false">
				<uni-list-item rightText="更多" showArrow>
					<view style="font-size: 42rpx;font-weight: 600;" slot="header">精选专题</view>
				</uni-list-item>
				<!-- <uni-list-item title="" note=""></uni-list-item> -->
			</uni-list>
			<view style="display: flex;justify-content: space-around;">
				<view class="card" style="width: 45%;">
					<view class="topic">
						<view>
							<view>#设计必读</view>
							<view>干货满满</view>
						</view>
						<image src="../../static/topic2.jpg" mode="widthFix"></image>
					</view>
				</view>
				<view class="card" style="width: 45%;">
					<view class="topic">
						<view>
							<view>#设计必读</view>
							<view>干货满满</view>
						</view>
						<image src="../../static/topic1.jpg" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 十年书虫·良心安利 -->
		<view class="container">
			<uni-list :border="false">
				<uni-list-item rightText="更多" showArrow>
					<view style="font-size: 42rpx;font-weight: 600;" slot="header">十年书虫·良心安利</view>
				</uni-list-item>
			</uni-list>
			<uni-grid
				:column="2"
				:highlight="false"
				:square="false"
				:showBorder="false"
				style="margin: 10rpx;"
				@change="detail($event)"
			>
				<uni-grid-item v-for="(item, index) in sincerelyRecommend" :key="index" :index="item.id">
					<view class="bookitem">
						<image :src="item.cover" mode="widthFix"></image>
						<view>
							<view>{{ item.name }}</view>
							<view>{{ item.author }}</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 轮播图数据
			banners: ['banner1-1.jpg', 'banner1-2.jpg', 'banner1-3.jpg', 'banner1-4.jpg'],
			current: 0,
			NewBookpreview: [], // 新书抢先看
			hot: null, // 热门更新1
			hotUpdate: [], //热门更新
			recommend: [], //重磅推荐
			sincerelyRecommend: [] //良心安利
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		// 获取页面数据
		getData() {
			uni.request({
				// url: 'http://110.42.175.11:9999/v1/novel/index',
				url: `${getApp().globalData.baseURL}/v1/novel/index`,
				success: res => {
					let msg = res.data.data;
					console.log(msg);
					this.hot = msg.hotUpdate.slice(0, 1)[0];
					// console.log(this.hot)
					this.hotUpdate = msg.hotUpdate.slice(1);
					console.log(this.hotUpdate);
					this.NewBookpreview = msg.NewBookpreview;
					this.recommend = msg.recommend;
					this.sincerelyRecommend = msg.sincerelyRecommend;
				}
			});
		},
		changeBanner(e) {
			this.current = e.detail.current;
		},
		detail(e) {
			// console.log(e.detail.index)
			this.toDetail(e.detail.index);
		},
		// 搜索框获取焦点
		goTo(page) {
			uni.navigateTo({
				url: `/pages/${page}/${page}`
			});
		},
		// 跳转到tab页 fuli
		switchTo() {
			uni.switchTab({
				url: '../fuli/fuli'
			});
		},
		navigatorTo(e) {
			// console.log(e);
			let rank = e.detail.index;
			uni.navigateTo({
				url: `/pages/rank/rank?rank=${rank}`
			});
		},
		// 跳转图书详情页面
		toDetail(id) {
			uni.navigateTo({
				url: `/pages/bookDetail/bookDetail?id=${id}`
			});
		}
	}
};
</script>

<style scoped lang="scss">
// 一行显示
.single {
	// width: 100%;
	width: 168rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.container {
	margin: auto;
	padding: 10rpx;
}
// 自定义导航栏
.tableft {
	font-size: 42rpx;
	font-weight: 600;
}
/deep/.uni-navbar__header-btns {
	width: 180rpx !important;
}
.tabright {
	width: 100%;
	padding: 10rpx 20rpx;
	background-color: #f1f1f1;
	border-radius: 60rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	> view {
		color: #ff604f;
		font-weight: 600;
		font-size: 30rpx;
	}
}
// 搜索框
.uni-searchbar {
	padding: 7px;
}
// 搜索框 文字位置
/deep/.uni-searchbar__box {
	justify-content: flex-start;
	height: 56rpx;
}

// 宫格
/deep/.uni-grid-item__box {
	align-items: center;
	// padding: 10rpx;
}
// 图书封面
.cover {
	width: 150rpx;
	border-radius: 0 10rpx 10rpx 0;
}
// 热门更新
.booklist {
	width: 100%;
	display: flex;
	justify-content: space-between;
	> view {
		width: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		> view:first-child {
			font-size: 40rpx;
			font-weight: 600;
		}
		> view:nth-child(2) {
			color: #999;
			font-size: 28rpx;
			// line-height: 56rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		> view:last-child {
			display: flex;
			justify-content: space-between;
			> view:first-child {
				color: #999999;
			}
			> view:last-child {
				font-weight: 600;
				font-size: 30rpx;
				color: #feb200;
			}
		}
	}
}
// 排行标签
.tag {
	width: 30rpx;
	height: 40rpx;
	color: #fff;
	text-align: center;
	line-height: 40rpx;
	position: absolute;
	top: 0;
	right: 30rpx;
	z-index: 2;
	&::after {
		position: absolute;
		content: '';
		right: 0;
		top: 96%;
		border-style: solid;
		border-width: 0 16rpx 12rpx 15rpx;
	}
}
.tag-one {
	background-color: #ff5700;
	background-image: linear-gradient(0deg, #ff5700 0%, #ff9201 43%);
	// background-color: #ff604f;
	&::after {
		border-color: #ff5700 #ff5700 transparent #ff5700; //#FF5700
	}
}
.tag-two {
	background-color: #ffae01;
	background-image: linear-gradient(0deg, #ffae01 25%, #fee602 100%);
	&::after {
		border-color: #ffae01 #ffae01 transparent #ffae01;
	}
}
.tag-three {
	background-color: #a8b2bc;
	background-image: linear-gradient(0deg, #a8b2bc 0%, #d0d3d5 100%);
	&::after {
		border-color: #a8b2bc #a8b2bc transparent #a8b2bc;
	}
}

// 专题
.card {
	width: 45%;
	padding: 20rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: -2px 2px 7px 0 rgba(0, 0, 0, 0.1);
	.topic {
		display: flex;
		justify-content: space-between;
		> view:first-child {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			> view:first-child {
				font-weight: 600;
				font-size: 32rpx;
			}
			> view:last-child {
				color: #999;
			}
		}
		> image {
			width: 100rpx;
			border-radius: 0 10rpx 10rpx 0;
		}
	}
}
// 最后推荐
.bookitem {
	padding: 10rpx;
	display: flex;
	width: 100%;
	> image {
		width: 130rpx;
		border-radius: 0 10rpx 10rpx 0;
		margin-right: 16rpx;
	}
	> view {
		display: flex;
		padding: 20rpx 0;
		flex-direction: column;
		justify-content: space-between;
		> view:first-child {
			font-weight: 600;
			font-size: 30rpx;
		}
		> view:last-child {
			color: #999;
			font-size: 24rpx;
		}
	}
}
</style>
